<%- include fheader.ejs%>
<style>
    .ui-dialog-bd div{text-align: left;}
    #qrcodeWrap img{width:150px;display: block;margin:25px auto}
    #dlcode img{
        width: 250px;display: block;margin: 0 auto
    }
</style>
<header class="ui-header ui-header-stable ui-border-b">
    <h1>您好，<%= channel_name%></h1>
</header>
<section  class="ui-container">
    <div class="helplink">
        <a href="/wx/html/help.html" style="color:#fff;line-height: 35px">
            <i class="iconfontbaoxian icon-changjianwenti" style="font-size: 20px;color:#fff;"></i>
            问题须知
        </a>
    </div>
    <div id="getCardQrcode" style="display: none;">
        <div class="ui-form" style="<%= (prod_list.length>1?'width: 60%;border: 1px solid #eee;border-radius: 4px;margin-left: 5px;':' display: none;')%>">
            <form>
                <div class="ui-form-item">
                    <label style="width:40px;">产品</label>
                    <div class="ui-select" style="margin-left:40px">
                        <select id="prodList">
                            <%for(var i in prod_list){%>
                            <option value="<%= prod_list[i]['prod_id']%>"><%=prod_list[i]['prod_name']%></option>
                            <%}%>
                        </select>
                    </div>
                </div>
            </form>
        </div>
        <div class="con1" style="text-align:center;">
            <!--<h4 class="title1">扫码下方二维码，获取卡密</h4>-->
            <div id="qrcodeWrap"><img src="/wx/img/ewmbg.png" width="150"></div>
            <div style="margin: 15px 0;padding: 10px;width: 100%">
                <button  id="btnGetCard2" class="ui-btn ui-btn-primary ui-btn-lg">点击生成卡密</button>
            </div>
        </div>

    </div>

    <ul class="ui-list ui-list-pure his-kami" id="cardHis" style="margin:15px 0 65px;background:#f6f6f6;display: none"></ul>

    <div class="con3" id="downloadQrcode"  style="text-align: center;">
        <div><img src="/wx/img/jxz_title.png" width="200" style="padding-bottom:5%"></div>
        <div id="dlcode"><img src="/wx/img/down_ewm.png"></div>
        <div style="margin-top:8%;color:#1ea5f5">扫码下载APP</div>
    </div>
</section>

<div class="ui-footer ui-footer-stable ui-btn-group ui-border-t">
    <button type="button" class="ui-btn ui-btn-primary active" id="btnDownload"><i class="iconfontbaoxian icon-erweima"></i>扫码下载</button>
    <button type="button" class="ui-btn ui-btn-primary" id="btnShowHis"><i class="iconfontbaoxian icon-42lishi"></i>查看历史</button>
    <button type="button" class="ui-btn ui-btn-primary" id="btnGetCard"><i class="iconfontbaoxian icon-shuaqia"></i>获取卡密</button>
</div>

<script type="tmpl/text" id="jstmpl">
{{for(var i in it){}}
    <li>
        <p class="date">{{=it[i]['createdate']}}</p>
        <div>
            <h4><span class="blue fr">{{=STAT_MAP[it[i]['verifydone']]}}</span><i>保险卡：</i>{{=it[i]['card_id']}}</h4>
            <h4><i>密码：</i>{{=it[i]['secret_string']}}</h4>
            <h4 class="show_ewm" data-cardid="{{=it[i]['card_id']}}" data-secret="{{=it[i]['secret_string']}}"><span class="ui-icon-next"></span>显示二维码</h4>
        </div>
    </li>
{{}}}
</script>

<script src="//cdn.juqingdata.com/assets/js/qrcode.min.js"></script>
<script>
    var STAT_MAP = {
        0:'未验证',
        1:'已验证',
        2:'过期未验证',
        3:'失效',
        4:'保单退款'
    };
    $(function(){
        var appUrl = 'http://m.juqingdata.com/rest/svcWxPage/download';
        var LIST_URL = '/rest/svcWx/mdCardGetRecentBySelfChannelId';
        var GET_CARD = '/rest/svcWx/mdCardSecGen';
        var accName = '<%= acc_name%>';
        var channelId = '<%= channel_id%>';

        $('#btnDownload').on('touchend',function(){
            $('#getCardQrcode,#cardHis').hide();
            $('#btnShowHis,#btnGetCard').removeClass('active');
            $('#downloadQrcode').show();
            $(this).addClass('active');
        });

        $('#btnShowHis').on('touchend',function(){
            loadData();
            $('#getCardQrcode,#downloadQrcode').hide();
            $('#btnDownload,#btnGetCard').removeClass('active');
            $('#cardHis').show();
            $(this).addClass('active');
        });
        $('#btnGetCard').on('touchend',function(){

            $('#downloadQrcode,#cardHis').hide();
            $('#btnShowHis,#btnDownload').removeClass('active');
            $('#getCardQrcode').show();
            $(this).addClass('active');


        });
        $('#btnGetCard2').on('touchend',function(){
            document.getElementById('qrcodeWrap').innerHTML='';
            var p = {
                prod_id:$('#prodList').val(),
                name:accName,
                channel_id:channelId
            };
            juq.showLoading();
            juq.fpost(GET_CARD,p,function(data){
                juq.hideLoading();
                var obj = {card_id:data.card_id,secret_string:data.secret_string};
                new QRCode('qrcodeWrap', {text:JSON.stringify(obj),width:150,height:150});
            })
        });

        $('#cardHis').on('tap','.show_ewm',function() {
            var cardid = $(this).data('cardid');
            var secret = $(this).data('secret');
            var obj = {card_id: cardid, secret_string: secret};

            var dia = $.dialog({
                content: '<div style="text-align: center;margin-bottom: 15px">' +
                '<div id="tmpqrcode" style="width:200px;height: 200px;margin:0 auto;"></div>' +
                '</div>'
            });
            new QRCode('tmpqrcode', {text: JSON.stringify(obj), width: 200, height: 200});
            dia.on('touchend', function (e) {
                e.preventDefault();
                if (e.target.id == 'dialogButton0') {
                    $.dialog('hide')
                }
            })

        });
        function loadData() {
            var p = {
                name:accName,
                channel_id:channelId
            };

            juq.showLoading();
            juq.fpost(LIST_URL, p, function(data){
                juq.hideLoading();
                var html = $('#jstmpl').tmpl(data);
                $('#cardHis').html(html);
            });
        }
    });
</script>


<%- include ftailer.ejs%>